<template>
    <div class="homePage">
        <!-- <div class="left">
            <div class="left_header">
                <i
                    class="el-icon-user-solid
"
                ></i>
                人员积分管理
            </div>
            <div class="tip_header">
                <div class="tip_header_item"><span></span>工作任务</div>
                <div class="tip_header_item"><span></span>员工素质</div>
                <div class="tip_header_item"><span></span>劳动纪律</div>
                <div class="tip_header_item"><span></span>安全责任</div>
            </div>
            <div class="left_item">
                <div class="left_item_left">丁一</div>
                <div class="left_item_right">
                    <el-progress :percentage="100"></el-progress>
                    <el-progress
                        :percentage="100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="warning"
                    ></el-progress>
                    <el-progress
                        :percentage="50"
                        status="exception"
                    ></el-progress>
                </div>
            </div>
            <div class="left_item">
                <div class="left_item_left">李二</div>
                <div class="left_item_right">
                    <el-progress :percentage="100"></el-progress>
                    <el-progress
                        :percentage="100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="warning"
                    ></el-progress>
                    <el-progress
                        :percentage="50"
                        status="exception"
                    ></el-progress>
                </div>
            </div>
            <div class="left_item">
                <div class="left_item_left">张三</div>
                <div class="left_item_right">
                    <el-progress :percentage="30"></el-progress>
                    <el-progress
                        :percentage="100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :percentage="60"
                        status="warning"
                    ></el-progress>
                    <el-progress
                        :percentage="50"
                        status="exception"
                    ></el-progress>
                </div>
            </div>
            <div class="left_item">
                <div class="left_item_left">李四</div>
                <div class="left_item_right">
                    <el-progress :percentage="100"></el-progress>
                    <el-progress
                        :percentage="100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="warning"
                    ></el-progress>
                    <el-progress
                        :percentage="50"
                        status="exception"
                    ></el-progress>
                </div>
            </div>
            <div class="left_item">
                <div class="left_item_left">王五</div>
                <div class="left_item_right">
                    <el-progress :percentage="100"></el-progress>
                    <el-progress
                        :percentage="100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="warning"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="exception"
                    ></el-progress>
                </div>
            </div>
            <div class="left_item">
                <div class="left_item_left">丁六</div>
                <div class="left_item_right">
                    <el-progress :percentage="100"></el-progress>
                    <el-progress
                        :percentage="100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="warning"
                    ></el-progress>
                    <el-progress
                        :percentage="50"
                        status="exception"
                    ></el-progress>
                </div>
            </div>
            <div class="left_item">
                <div class="left_item_left">午七</div>
                <div class="left_item_right">
                    <el-progress :percentage="100"></el-progress>
                    <el-progress
                        :percentage="100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="warning"
                    ></el-progress>
                    <el-progress
                        :percentage="100"
                        status="exception"
                    ></el-progress>
                </div>
            </div>
        </div> -->

        <div class="center">
            <div class="center_top">
                <div
                    class="center_top_item"
                    v-for="(item, key) in data"
                    :key="item"
                    @click="fn(item)"
                >
                    <span :style="{ backgroundColor: dataColor[key] }"></span>
                    {{ item }}
                </div>
            </div>
            <div></div>
            <div id="svgContainer">
                <svg id="svg" width="1100" height="1100"></svg>
            </div>
        </div>
        <div class="right">
            <div class="right_top">
                <div id="main" style="height:45vh"></div>
            </div>
            <div class="right_bottom">
                <div id="main1" style="height:45vh"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import { posix } from "path";
import * as d3 from "d3";
import { defaultMaxListeners } from "events";
export default {
    data() {
        return {
            mainX: ["2018年", "2019年", "2020年", "2021年", "2022年", "2023年"],
            mainY: [66, 52, 43, 31, 22, 12],
            main1X: ["1号线", "2号线", "3号线", "4号线", "5号线"],
            main1Y: [30, 62, 10, 50, 22, 12],
            data: ["全路线", "1号线", "2号线", "3号线", "4号线", "5号线"],
            dataColor: [
                "#fff",
                "#e73438",
                "#006fb6",
                "#008a4c",
                "#f99a3c",
                "#c4d940",
            ],
        };
    },
    mounted() {
        var svg = d3.select("svg");

        // 定义地铁线路数据
        var lines = [
            {
                name: "1号线",
                color: "#e73438",
                stations: [
                    { name: "张洼", x: 660, y: 240 },
                    { name: "兴华苑", x: 660, y: 280 },
                    { name: "瑶海公园", x: 660, y: 320 },
                    { name: "合肥火车站", x: 660, y: 360 },
                    { name: "长淮", x: 660, y: 420 },
                    { name: "明光路", x: 660, y: 460 },
                    { name: "大东门", x: 660, y: 500 },
                    { name: "包公园", x: 660, y: 530 },
                    { name: "合工大南区", x: 660, y: 560 },
                    { name: "朱岗", x: 660, y: 590 },
                    { name: "秋浦河路", x: 660, y: 620 },
                    { name: "葛大店", x: 660, y: 650 },
                    { name: "望湖城", x: 630, y: 680 },
                    { name: "合肥南站", x: 600, y: 710 },
                    { name: "南站南广场", x: 600, y: 740 },
                    { name: "骆岗", x: 600, y: 770 },
                    { name: "高王", x: 600, y: 800 },
                    { name: "滨湖会展中心", x: 630, y: 830 },
                    { name: "紫庐", x: 630, y: 860 },
                    { name: "塘西河公园", x: 630, y: 890 },
                    { name: "金斗公园", x: 630, y: 920 },
                    { name: "云谷路", x: 630, y: 950 },
                    { name: "万达城", x: 630, y: 980 },
                    { name: "万年埠", x: 630, y: 1010 },
                    { name: "丙子铺", x: 590, y: 1040 },
                    { name: "九连圩", x: 550, y: 1040 },
                ],
            },
            {
                name: "2号线",
                color: "#006fb6",
                stations: [
                    { name: "南岗", x: 20, y: 500 },
                    { name: "桂庄", x: 50, y: 500 },
                    { name: "汽车西站", x: 90, y: 500 },
                    { name: "振兴路", x: 140, y: 500 },
                    { name: "蜀山西", x: 180, y: 500 },
                    { name: "大蜀山", x: 220, y: 500 },
                    { name: "天柱路", x: 260, y: 500 },
                    { name: "科学大道", x: 310, y: 500 },
                    { name: "十里庙", x: 360, y: 500 },
                    { name: "西七里塘", x: 410, y: 500 },
                    { name: "五里墩", x: 460, y: 500 },
                    { name: "三里南", x: 500, y: 500 },
                    { name: "安农大", x: 540, y: 500 },
                    { name: "三孝口", x: 580, y: 500 },
                    { name: "四牌楼", x: 620, y: 500 },
                    { name: "大东门", x: 660, y: 500 },
                    { name: "大里街", x: 700, y: 500 },
                    { name: "东五里井", x: 750, y: 500 },
                    { name: "东七里", x: 800, y: 500 },
                    { name: "漕冲", x: 840, y: 500 },
                    { name: "东二十埠", x: 890, y: 500 },
                    { name: "龙岗", x: 930, y: 500 },
                    { name: "王岗", x: 960, y: 500 },
                    { name: "三十埠", x: 1000, y: 500 },
                ],
            },
            {
                name: "3号线",
                color: "#008a4c",
                stations: [
                    { name: "幸福坝", x: 260, y: 860 },
                    { name: "安大磬苑校区", x: 290, y: 830 },
                    { name: "工大翡翠湖校区", x: 320, y: 800 },
                    { name: "大学城北", x: 350, y: 770 },
                    { name: "繁华大道", x: 350, y: 740 },
                    { name: "安医大二附院", x: 350, y: 710 },
                    { name: "省博物院", x: 350, y: 680 },
                    { name: "图书馆", x: 350, y: 650 },
                    { name: "合肥大剧院", x: 380, y: 620 },
                    { name: "市政务中心", x: 410, y: 590 },
                    { name: "洪岗", x: 410, y: 560 },
                    { name: "国防科技大学", x: 410, y: 530 },
                    { name: "西七里塘", x: 410, y: 500 },
                    { name: "南新庄", x: 410, y: 470 },
                    { name: "合肥西站", x: 440, y: 440 },
                    { name: "杏花村", x: 470, y: 410 },
                    { name: "四泉桥", x: 500, y: 360 },
                    { name: "郑桥", x: 540, y: 360 },
                    { name: "海裳", x: 570, y: 360 },
                    { name: "鸭林冲", x: 610, y: 360 },
                    { name: "合肥火车站", x: 660, y: 360 },
                    { name: "竹丝滩", x: 720, y: 360 },
                    { name: "方庙", x: 760, y: 360 },
                    { name: "窦桥湾", x: 800, y: 340 },
                    { name: "新海大道", x: 840, y: 320 },
                    { name: "勤劳村", x: 880, y: 300 },
                    { name: "文浍苑", x: 920, y: 280 },
                    { name: "幼儿师范", x: 960, y: 260 },
                    { name: "职教城", x: 1000, y: 240 },
                    { name: "职教城东", x: 1040, y: 220 },
                    { name: "相城路", x: 1080, y: 200 },
                ],
            },
            {
                name: "4号线",
                color: "#f99a3c",
                stations: [
                    { name: "青龙岗", x: 20, y: 590 },
                    { name: "合肥七中", x: 65, y: 590 },
                    { name: "量子科学中心", x: 125, y: 590 },
                    { name: "科大先研院", x: 195, y: 590 },
                    { name: "北雁湖", x: 245, y: 590 },
                    { name: "玉兰大道", x: 290, y: 590 },
                    { name: "金桂", x: 300, y: 620 },
                    { name: "柳树塘", x: 310, y: 650 },
                    { name: "图书馆", x: 350, y: 650 },
                    { name: "天鹅湖", x: 390, y: 650 },
                    { name: "天鹅湖东", x: 440, y: 650 },
                    { name: "姚公庙", x: 490, y: 650 },
                    { name: "南屏路", x: 530, y: 650 },
                    { name: "薛河", x: 570, y: 650 },
                    { name: "竹西", x: 600, y: 650 },
                    { name: "淝南", x: 600, y: 680 },
                    { name: "合肥南站", x: 600, y: 710 },
                    { name: "望湖城南", x: 650, y: 710 },
                    { name: "葛大店南", x: 700, y: 710 },
                    { name: "工经学院", x: 800, y: 710 },
                    { name: "尧渡河路", x: 800, y: 650 },
                    { name: "五里庙", x: 800, y: 600 },
                    { name: "唐桥", x: 800, y: 550 },
                    { name: "东七里", x: 800, y: 500 },
                    { name: "站塘", x: 800, y: 400 },
                    { name: "方庙", x: 760, y: 360 },
                    { name: "新海公园", x: 760, y: 330 },
                    { name: "十里村", x: 760, y: 300 },
                    { name: "陶冲湖东", x: 760, y: 270 },
                    { name: "安医大四附院", x: 760, y: 240 },
                    { name: "综保区", x: 760, y: 210 },
                ],
            },
            {
                name: "5号线",
                color: "#c4d940",
                stations: [
                    { name: "桂阳路", x: 510, y: 1040 },
                    { name: "滨湖竹园", x: 510, y: 980 },
                    { name: "云川公园", x: 540, y: 950 },
                    { name: "清水冲", x: 590, y: 950 },
                    { name: "云谷路", x: 630, y: 950 },
                    { name: "华山路", x: 670, y: 950 },
                    { name: "沈湾", x: 710, y: 950 },
                    { name: "渡江纪念馆", x: 760, y: 940 },
                    { name: "方兴湖", x: 760, y: 915 },
                    { name: "省行政中心东", x: 760, y: 890 },
                    { name: "义城", x: 760, y: 865 },
                    { name: "扬子江路", x: 760, y: 840 },
                    { name: "黄河路", x: 760, y: 815 },
                    { name: "花园大道", x: 760, y: 790 },
                    { name: "大连路", x: 760, y: 765 },
                    { name: "义兴", x: 730, y: 755 },
                    { name: "包河苑", x: 690, y: 755 },
                    { name: "盛大", x: 640, y: 755 },
                    { name: "合肥南站", x: 600, y: 710 },
                    { name: "望湖城西", x: 550, y: 710 },
                    { name: "凌大塘", x: 550, y: 680 },
                    { name: "休宁路", x: 550, y: 620 },
                    { name: "市第三医院", x: 550, y: 590 },
                    { name: "中国科大东区", x: 550, y: 560 },
                    { name: "稻香楼", x: 550, y: 530 },
                    { name: "三孝口", x: 580, y: 500 },
                    { name: "杏花公园", x: 570, y: 450 },
                    { name: "白水坝", x: 570, y: 400 },
                    { name: "海裳", x: 570, y: 360 },
                    { name: "北五里井", x: 570, y: 330 },
                    { name: "菱湖公园", x: 570, y: 290 },
                    { name: "六中菱湖校区", x: 570, y: 240 },
                    { name: "汲桥路", x: 570, y: 200 },
                ],
            },
        ];

        // 绘制地铁线路
        var line = d3
            .line()
            .x(function(d) {
                return d.x;
            })
            .y(function(d) {
                return d.y;
            });
        svg.selectAll(".line")
            .data(lines)
            .enter()
            .append("path")
            .attr("class", "line")
            .attr("d", function(d) {
                return line(d.stations);
            })
            .style("stroke", function(d) {
                return d.color;
            });

        // 绘制地铁站点
        svg.selectAll(".station")
            .data(
                d3.merge(
                    lines.map(function(d) {
                        return d.stations;
                    })
                )
            )
            .enter()
            .append("circle")
            .attr("class", "station")
            .attr("cx", function(d) {
                return d.x;
            })
            .attr("cy", function(d) {
                return d.y;
            })
            .attr("r", 5)
            .style("fill", "#fff")
            .style("stroke", "#333")
            .style("stroke-width", "2px");
        svg.selectAll(".station-label")
            .data(
                d3.merge(
                    lines.map(function(d) {
                        return d.stations;
                    })
                )
            )
            .enter()
            .append("text")
            .attr("class", "station-label")
            .attr("fill", "#fff")
            .attr("x", function(d) {
                return d.x;
            })
            .attr("y", function(d) {
                return d.y - 10;
            })
            .text(function(d) {
                return d.name;
            });
        this.drawMain();
        this.drawMain1();
        let one, two;
        setInterval(() => {
            let all = document.querySelectorAll("circle");
            if (!all || all.length === 0) return;
            if (one) {
                one.classList.remove("alarm");
            }
            if (two) {
                two.classList.remove("alarm");
            }
            let max = all.length;
            one = all[Math.floor(Math.random() * max)];
            two = all[Math.floor(Math.random() * max)];
            one.classList.add("alarm");
            two.classList.add("alarm");
        }, 3000);
        setTimeout(() => {
            // 获取父DOM元素和DOM元素
            let parentElement = document.getElementById("svgContainer");
            let domElement = document.getElementById("svg");
            // 初始化缩放比例和坐标位置
            let scale = 1;
            let posX = 100;
            let posY = -200;

            // 监听鼠标滚轮事件
            parentElement.addEventListener("wheel", (event) => {
                event.preventDefault(); // 阻止滚轮的默认行为
                console.log(defaultMaxListeners, "???");
                // 根据滚轮的delta值来计算缩放比例
                if (event.deltaY < 0) {
                    scale += 0.05;
                } else {
                    scale -= 0.05;
                }

                // 设置DOM元素的缩放样式
                domElement.style.transform = `scale(${scale}) translate(${posX}px, ${posY}px)`;
            });

            // 监听鼠标按下和移动事件，实现拖拽功能
            domElement.addEventListener("mousedown", (event) => {
                event.preventDefault(); // 阻止默认的拖拽行为

                // 记录初始点击位置
                let startX = event.clientX;
                let startY = event.clientY;
                // 监听鼠标移动事件
                let handleMouseMove = (event) => {
                    event.preventDefault(); // 阻止默认的拖拽行为

                    // 计算鼠标移动的距离
                    let moveX = event.clientX - startX;
                    let moveY = event.clientY - startY;
                    console.log(posX, moveX, event.clientX, startX);
                    // 根据鼠标移动距离调整DOM元素的位置
                    posX += moveX;
                    posY += moveY;
                    domElement.style.transform = `scale(${scale}) translate(${posX *
                        scale}px, ${posY * scale}px)`;

                    // 更新初始点击位置
                    startX = event.clientX;
                    startY = event.clientY;
                };

                // 监听鼠标释放事件，停止拖拽
                let handleMouseUp = () => {
                    document.removeEventListener("mousemove", handleMouseMove);
                    document.removeEventListener("mouseup", handleMouseUp);
                };

                // 添加鼠标移动和释放事件监听
                document.addEventListener("mousemove", handleMouseMove);
                document.addEventListener("mouseup", handleMouseUp);
            });
        }, 2000);
    },

    methods: {
        fn(key) {
            var svg = d3.select("svg");
            svg.selectAll("*").remove(); // 清空SVG元素的子元素

            // 定义地铁线路数据
            var lines = [
                {
                    name: "1号线",
                    color: "#e73438",
                    stations: [
                        { name: "张洼", x: 660, y: 240 },
                        { name: "兴华苑", x: 660, y: 280 },
                        { name: "瑶海公园", x: 660, y: 320 },
                        { name: "合肥火车站", x: 660, y: 360 },
                        { name: "长淮", x: 660, y: 420 },
                        { name: "明光路", x: 660, y: 460 },
                        { name: "大东门", x: 660, y: 500 },
                        { name: "包公园", x: 660, y: 530 },
                        { name: "合工大南区", x: 660, y: 560 },
                        { name: "朱岗", x: 660, y: 590 },
                        { name: "秋浦河路", x: 660, y: 620 },
                        { name: "葛大店", x: 660, y: 650 },
                        { name: "望湖城", x: 630, y: 680 },
                        { name: "合肥南站", x: 600, y: 710 },
                        { name: "南站南广场", x: 600, y: 740 },
                        { name: "骆岗", x: 600, y: 770 },
                        { name: "高王", x: 600, y: 800 },
                        { name: "滨湖会展中心", x: 630, y: 830 },
                        { name: "紫庐", x: 630, y: 860 },
                        { name: "塘西河公园", x: 630, y: 890 },
                        { name: "金斗公园", x: 630, y: 920 },
                        { name: "云谷路", x: 630, y: 950 },
                        { name: "万达城", x: 630, y: 980 },
                        { name: "万年埠", x: 630, y: 1010 },
                        { name: "丙子铺", x: 590, y: 1040 },
                        { name: "九连圩", x: 550, y: 1040 },
                    ],
                },
                {
                    name: "2号线",
                    color: "#006fb6",
                    stations: [
                        { name: "南岗", x: 20, y: 500 },
                        { name: "桂庄", x: 50, y: 500 },
                        { name: "汽车西站", x: 90, y: 500 },
                        { name: "振兴路", x: 140, y: 500 },
                        { name: "蜀山西", x: 180, y: 500 },
                        { name: "大蜀山", x: 220, y: 500 },
                        { name: "天柱路", x: 260, y: 500 },
                        { name: "科学大道", x: 310, y: 500 },
                        { name: "十里庙", x: 360, y: 500 },
                        { name: "西七里塘", x: 410, y: 500 },
                        { name: "五里墩", x: 460, y: 500 },
                        { name: "三里南", x: 500, y: 500 },
                        { name: "安农大", x: 540, y: 500 },
                        { name: "三孝口", x: 580, y: 500 },
                        { name: "四牌楼", x: 620, y: 500 },
                        { name: "大东门", x: 660, y: 500 },
                        { name: "大里街", x: 700, y: 500 },
                        { name: "东五里井", x: 750, y: 500 },
                        { name: "东七里", x: 800, y: 500 },
                        { name: "漕冲", x: 840, y: 500 },
                        { name: "东二十埠", x: 890, y: 500 },
                        { name: "龙岗", x: 930, y: 500 },
                        { name: "王岗", x: 960, y: 500 },
                        { name: "三十埠", x: 1000, y: 500 },
                    ],
                },
                {
                    name: "3号线",
                    color: "#008a4c",
                    stations: [
                        { name: "幸福坝", x: 260, y: 860 },
                        { name: "安大磬苑校区", x: 290, y: 830 },
                        { name: "工大翡翠湖校区", x: 320, y: 800 },
                        { name: "大学城北", x: 350, y: 770 },
                        { name: "繁华大道", x: 350, y: 740 },
                        { name: "安医大二附院", x: 350, y: 710 },
                        { name: "省博物院", x: 350, y: 680 },
                        { name: "图书馆", x: 350, y: 650 },
                        { name: "合肥大剧院", x: 380, y: 620 },
                        { name: "市政务中心", x: 410, y: 590 },
                        { name: "洪岗", x: 410, y: 560 },
                        { name: "国防科技大学", x: 410, y: 530 },
                        { name: "西七里塘", x: 410, y: 500 },
                        { name: "南新庄", x: 410, y: 470 },
                        { name: "合肥西站", x: 440, y: 440 },
                        { name: "杏花村", x: 470, y: 410 },
                        { name: "四泉桥", x: 500, y: 360 },
                        { name: "郑桥", x: 540, y: 360 },
                        { name: "海裳", x: 570, y: 360 },
                        { name: "鸭林冲", x: 610, y: 360 },
                        { name: "合肥火车站", x: 660, y: 360 },
                        { name: "竹丝滩", x: 720, y: 360 },
                        { name: "方庙", x: 760, y: 360 },
                        { name: "窦桥湾", x: 800, y: 340 },
                        { name: "新海大道", x: 840, y: 320 },
                        { name: "勤劳村", x: 880, y: 300 },
                        { name: "文浍苑", x: 920, y: 280 },
                        { name: "幼儿师范", x: 960, y: 260 },
                        { name: "职教城", x: 1000, y: 240 },
                        { name: "职教城东", x: 1040, y: 220 },
                        { name: "相城路", x: 1080, y: 200 },
                    ],
                },
                {
                    name: "4号线",
                    color: "#f99a3c",
                    stations: [
                        { name: "青龙岗", x: 20, y: 590 },
                        { name: "合肥七中", x: 65, y: 590 },
                        { name: "量子科学中心", x: 125, y: 590 },
                        { name: "科大先研院", x: 195, y: 590 },
                        { name: "北雁湖", x: 245, y: 590 },
                        { name: "玉兰大道", x: 290, y: 590 },
                        { name: "金桂", x: 300, y: 620 },
                        { name: "柳树塘", x: 310, y: 650 },
                        { name: "图书馆", x: 350, y: 650 },
                        { name: "天鹅湖", x: 390, y: 650 },
                        { name: "天鹅湖东", x: 440, y: 650 },
                        { name: "姚公庙", x: 490, y: 650 },
                        { name: "南屏路", x: 530, y: 650 },
                        { name: "薛河", x: 570, y: 650 },
                        { name: "竹西", x: 600, y: 650 },
                        { name: "淝南", x: 600, y: 680 },
                        { name: "合肥南站", x: 600, y: 710 },
                        { name: "望湖城南", x: 650, y: 710 },
                        { name: "葛大店南", x: 700, y: 710 },
                        { name: "工经学院", x: 800, y: 710 },
                        { name: "尧渡河路", x: 800, y: 650 },
                        { name: "五里庙", x: 800, y: 600 },
                        { name: "唐桥", x: 800, y: 550 },
                        { name: "东七里", x: 800, y: 500 },
                        { name: "站塘", x: 800, y: 400 },
                        { name: "方庙", x: 760, y: 360 },
                        { name: "新海公园", x: 760, y: 330 },
                        { name: "十里村", x: 760, y: 300 },
                        { name: "陶冲湖东", x: 760, y: 270 },
                        { name: "安医大四附院", x: 760, y: 240 },
                        { name: "综保区", x: 760, y: 210 },
                    ],
                },
                {
                    name: "5号线",
                    color: "#c4d940",
                    stations: [
                        { name: "桂阳路", x: 510, y: 1040 },
                        { name: "滨湖竹园", x: 510, y: 980 },
                        { name: "云川公园", x: 540, y: 950 },
                        { name: "清水冲", x: 590, y: 950 },
                        { name: "云谷路", x: 630, y: 950 },
                        { name: "华山路", x: 670, y: 950 },
                        { name: "沈湾", x: 710, y: 950 },
                        { name: "渡江纪念馆", x: 760, y: 940 },
                        { name: "方兴湖", x: 760, y: 915 },
                        { name: "省行政中心东", x: 760, y: 890 },
                        { name: "义城", x: 760, y: 865 },
                        { name: "扬子江路", x: 760, y: 840 },
                        { name: "黄河路", x: 760, y: 815 },
                        { name: "花园大道", x: 760, y: 790 },
                        { name: "大连路", x: 760, y: 765 },
                        { name: "义兴", x: 730, y: 755 },
                        { name: "包河苑", x: 690, y: 755 },
                        { name: "盛大", x: 640, y: 755 },
                        { name: "合肥南站", x: 600, y: 710 },
                        { name: "望湖城西", x: 550, y: 710 },
                        { name: "凌大塘", x: 550, y: 680 },
                        { name: "休宁路", x: 550, y: 620 },
                        { name: "市第三医院", x: 550, y: 590 },
                        { name: "中国科大东区", x: 550, y: 560 },
                        { name: "稻香楼", x: 550, y: 530 },
                        { name: "三孝口", x: 580, y: 500 },
                        { name: "杏花公园", x: 570, y: 450 },
                        { name: "白水坝", x: 570, y: 400 },
                        { name: "海裳", x: 570, y: 360 },
                        { name: "北五里井", x: 570, y: 330 },
                        { name: "菱湖公园", x: 570, y: 290 },
                        { name: "六中菱湖校区", x: 570, y: 240 },
                        { name: "汲桥路", x: 570, y: 200 },
                    ],
                },
            ];
            if (key !== "全路线") {
                lines = lines.filter((val) => {
                    return val.name === key;
                });
            }

            // 绘制地铁线路
            var line = d3
                .line()
                .x(function(d) {
                    return d.x;
                })
                .y(function(d) {
                    return d.y;
                });
            svg.selectAll(".line")
                .data(lines)
                .enter()
                .append("path")
                .attr("class", "line")
                .attr("d", function(d) {
                    return line(d.stations);
                })
                .style("stroke", function(d) {
                    return d.color;
                });

            // 绘制地铁站点
            svg.selectAll(".station")
                .data(
                    d3.merge(
                        lines.map(function(d) {
                            return d.stations;
                        })
                    )
                )
                .enter()
                .append("circle")
                .attr("class", "station")
                .attr("cx", function(d) {
                    return d.x;
                })
                .attr("cy", function(d) {
                    return d.y;
                })
                .attr("r", 5)
                .style("fill", "#fff")
                .style("stroke", "#333")
                .style("stroke-width", "2px");
            svg.selectAll(".station-label")
                .data(
                    d3.merge(
                        lines.map(function(d) {
                            return d.stations;
                        })
                    )
                )
                .enter()
                .append("text")
                .attr("class", "station-label")
                .attr("fill", "#fff")
                .attr("x", function(d) {
                    return d.x;
                })
                .attr("y", function(d) {
                    return d.y - 10;
                })
                .text(function(d) {
                    return d.name;
                });
        },
        drawMain() {
            var chartDom = document.getElementById("main");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                visualMap: [],

                title: {
                    text: "故障趋势",
                    textStyle: {
                        color: "#fff",
                    },
                },
                tooltip: {
                    trigger: "axis",
                },
                // legend: {
                //     data: ["该年故障次数"],
                //     textStyle: {
                //         color: "#fff",
                //     },
                // },
                textStyle: {
                    color: "#fff",
                },
                xAxis: {
                    type: "category",
                    data: this.mainX,
                },
                yAxis: {
                    splitLine: {
                        show: false,
                    },
                    type: "value",
                },
                series: [
                    {
                        name: "该年故障次数",
                        data: this.mainY,
                        type: "line",
                        showSymbol: false,
                        color: "#79b4bc",
                        // areaStyle: {
                        //     color: new echarts.graphic.LinearGradient(
                        //         0,
                        //         0,
                        //         0,
                        //         1,
                        //         [
                        //             { offset: 0, color: "#448378" },
                        //             { offset: 0.5, color: "#3f858d" },
                        //             { offset: 1, color: "#249bb7" },
                        //         ]
                        //     ),
                        // },
                    },
                ],
            };
            option && myChart.setOption(option);

            // myChart.getZr().on("click", (params) => {
            //     let pointInPixel = [params.offsetX, params.offsetY];
            //     if (myChart.containPixel("grid", pointInPixel)) {
            //         //点击第几个柱子
            //         let pointInGrid = myChart.convertFromPixel(
            //             { seriesIndex: 0 },
            //             pointInPixel
            //         );
            //         // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
            //         // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
            //         // x轴数据的索引
            //         let xIndex = pointInGrid[0];
            //         this.curFile = this.fileList.filter((val) => {
            //             return val.month == xIndex + 1 + "月";
            //         });
            //     }
            // });
        },
        drawMain1() {
            var chartDom2 = document.getElementById("main1");

            var myChart2 = echarts.init(chartDom2);

            var option2;
            option2 = {
                title: {
                    text: "线路故障统计",
                    textStyle: {
                        color: "#fff",
                    },
                },
                tooltip: {
                    trigger: "axis",
                },
                // legend: {
                //     data: ["信号系统"],
                //     textStyle: {
                //         color: "#fff",
                //     },
                // },
                textStyle: {
                    color: "#fff",
                },
                xAxis: {
                    type: "category",
                    data: this.main1X,
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "该线路故障次数",
                        data: this.main1Y,
                        type: "bar",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "#448378" },
                                    { offset: 0.5, color: "#3f858d" },
                                    { offset: 1, color: "#249bb7" },
                                ]
                            ),
                        },
                    },
                ],
            };

            option2 && myChart2.setOption(option2);
        },
    },
};
</script>
<style>
.line {
    fill: none;
    stroke: #333;
    stroke-width: 10px;
}
.station {
    fill: #fff;
    stroke: #333;
    stroke-width: 10px;
}
text {
    font-size: 12px;
    font-family: sans-serif;
    text-anchor: middle;
}

.alarm {
    fill: #ff6347 !important; /* 设置填充颜色为红色 */
    stroke: #ff0000 !important; /* 设置边框颜色为红色 */
    stroke-width: 4px !important; /* 设置边框宽度为4像素 */
}
</style>
<style lang="less" scoped>
.homePage {
    display: flex;
    padding: 0.7813vw;
    height: 100%;
    box-sizing: border-box;
    [class^="el"] {
        padding-right: 0.1563vw;
    }
    .left {
        flex: 2;
        height: 100%;
        overflow: auto;
        .left_header {
            padding: 0.8vw 0.8vw;
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 0.9375vw;
        }
        .tip_header {
            display: flex;
            flex-wrap: wrap;
            .tip_header_item {
                width: 50%;
                padding: 0.3906vw;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                span {
                    margin-right: 0.3906vw;
                    width: 0.7813vw;
                    height: 0.7813vw;
                    display: inline-block;
                    content: "";
                    border-radius: 0.2113vw;
                }
            }
            .tip_header_item:nth-child(1) {
                span {
                    background-color: #409eff;
                }
            }

            .tip_header_item:nth-child(2) {
                span {
                    background-color: #67c23a;
                }
            }

            .tip_header_item:nth-child(3) {
                span {
                    background-color: #e6a23c;
                }
            }

            .tip_header_item:nth-child(4) {
                span {
                    background-color: #f56c6c;
                }
            }
        }
        .left_item {
            display: flex;
            margin: 0.3906vw;
            height: 7.8125vw;
            align-items: center;
            .left_item_left {
                width: 1.5625vw;
            }
            .left_item_right {
                flex: 1;
            }
        }
    }
    .center {
        flex: 6;
        min-width: 0;
        height: 100%;
        overflow: hidden;
        #svgContainer {
            overflow: hidden;
        }
        svg {
            transform: scale(1) translate(100px, -200px);
        }
        box-sizing: border-box;
        .center_top {
            display: flex;
            flex-wrap: wrap;
            height: 7.8125vw;
            justify-content: center;
            align-items: center;
            .center_top_item {
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                    display: inline-block;
                    width: 2.3438vw;
                    height: 2.3438vw;
                    margin-right: 0.5344vw;
                    border-radius: 0.7813vw;
                }
                color: #fff;
                font-style: 1.25vw;
                width: 33.33%;
            }
        }
    }
    .right {
        flex: 1.5;
        .right_top {
            height: 50%;
        }
        .right_bottom {
            height: 50%;
        }
        .right_header {
            padding: 0.8vw 0.8vw;
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 0.9375vw;
        }
    }
}
</style>
